* {
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.contain {
  width: 1360px;
  margin: 0 auto;
}

li, ol, li {
  list-style: none;
}

body {
  display: flex;
  flex-direction: column;
}

.color {
  width: 100%;
  height: 60px;
  background-color: #333;
}

.top {
  height: 60px;
  position: relative;
  line-height: 46px;
}

.top .left {
  float: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.top .left li {
  margin: 5px;
  color: #fff;
}

.top .right {
  float: right;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  margin-right: 60px;
}

.top .right li {
  margin: 5px;
  color: #fff;
}

.top .right li a {
  color: white;
}

.top .right > .tupian {
  width: 24px;
  height: 22px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -110px;
  background-position-y: -50px;
  position: absolute;
  right: -50px;
}

.top .right .tupian:hover {
  width: 44px;
  height: 40px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -128px;
  background-position-y: -40px;
  position: absolute;
  right: -60px;
}

.center {
  flex: 1;
}

.center .shang {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.center .shang .left {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.center .shang .left li {
  margin: auto 5px;
  cursor: pointer;
}

.center .shang .left li img {
  width: 137px;
  vertical-align: middle;
}

.center .shang .right {
  display: flex;
  flex-direction: column;
}

.center .shang .right ul {
  display: flex;
}

.center .shang .right ul li {
  margin: 5px;
  cursor: pointer;
}

.center .shang .right .xia {
  height: 30px;
}

.center .shang .right .xia span {
  height: 100%;
  display: block;
  width: 420px;
  border: 1px solid #333;
  border-radius: 30px;
  float: left;
  position: relative;
}

.center .shang .right .xia span input {
  height: 100%;
  width: 360px;
  box-sizing: border-box;
  border: none;
  margin-left: 20px;
  border-radius: none;
}

.center .shang .right .xia span i {
  width: 25px;
  height: 25px;
  float: right;
  position: absolute;
  right: -13px;
  margin-right: 26px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -172px;
  background-position-y: -46px;
  z-index: 10;
  cursor: pointer;
}

.center .bgc {
  display: flex;
  width: 1900px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.center .bgc ul {
  display: flex;
  width: 1900px;
  margin: 0 auto;
  position: relative;
}

.center .bgc ul li {
  width: 1900px;
}

.center .bgc ul li img {
  width: 1960px;
}

.center .bgc span {
  width: 50px;
  height: 50px;
  display: block;
  font-size: 60px;
  background-color: rgba(51, 51, 51, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 999;
  position: absolute;
}

.center .bgc .left {
  left: 473px;
  top: 260px;
}

.center .bgc .left:hover {
  background-color: rgba(51, 51, 51, 0.8);
}

.center .bgc .right {
  right: 310px;
  top: 260px;
}

.center .bgc .right:hover {
  background-color: rgba(51, 51, 51, 0.8);
}

.center .bgc .pointBox {
  display: flex;
  border-radius: 50%;
  position: absolute;
  bottom: 30px;
  left: 950px;
}

.center .bgc .pointBox li {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.center .bgc .pointBox li.active {
  background-color: red;
}

.center .caidan {
  display: flex;
  position: absolute;
  top: 121px;
}

.center .caidan ul {
  width: 150px;
  background-color: pink;
  font-size: 20px;
  background-color: rgba(51, 51, 51, 0.5);
}

.center .caidan ul a {
  width: 160px;
  color: black;
}

.center .caidan ul a .li {
  width: 160px;
  display: flex;
}

.center .caidan ul a .li span {
  float: left;
}

.center .caidan ul li {
  cursor: pointer;
  display: flex;
  margin-left: 15px;
  margin: 23px 0;
  padding: 7.2px 23px;
}

.center .caidan ul li:hover {
  background-color: rgba(51, 51, 51, 0.5);
}

.center .caidan ul li span {
  display: block;
  width: 23px;
  height: 23px;
  background-image: url(https://p2.qhimg.com/t01bd7a5051ca7bcc11.png);
}

.center .caidan ul li:nth-child(1) {
  background-color: rgba(51, 51, 51, 0.5);
}

.center .caidan .xia {
  display: none;
  z-index: 9999999999;
}

.center .caidan .xia ol {
  width: 1000px;
  height: 500px;
  background-color: #fff;
  display: flex;
}

.center .caidan .xia ol li {
  cursor: pointer;
  height: 60px;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

.center .caidan .xia ol li img {
  width: 60px;
  vertical-align: middle;
}

.center .active {
  display: flex;
  flex-direction: column;
}

.center .active span {
  display: block;
  font-size: 20px;
  margin: 10px;
  margin-bottom: 10px;
}

.center .active span i {
  font-style: normal;
  font-size: 16px;
  cursor: pointer;
}

.center .active ul {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.center .active ul li {
  cursor: pointer;
}

.center .active ul li img {
  width: 280px;
  height: 242px;
}

.center .active .prc {
  margin: auto;
}

.center .active .prc img {
  width: 100%;
  height: 100%;
}

.center .home, .center .luyou, .center .anquan, .center .robot, .center .shouhu, .center .shengtai, .center .hot {
  display: flex;
  flex-direction: column;
}

.center .home span, .center .luyou span, .center .anquan span, .center .robot span, .center .shouhu span, .center .shengtai span, .center .hot span {
  display: block;
  font-size: 20px;
  margin: 10px;
}

.center .home span i, .center .luyou span i, .center .anquan span i, .center .robot span i, .center .shouhu span i, .center .shengtai span i, .center .hot span i {
  font-style: normal;
  font-size: 16px;
  cursor: pointer;
}

.center .home ul, .center .luyou ul, .center .anquan ul, .center .robot ul, .center .shouhu ul, .center .shengtai ul, .center .hot ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.center .home ul li, .center .luyou ul li, .center .anquan ul li, .center .robot ul li, .center .shouhu ul li, .center .shengtai ul li, .center .hot ul li {
  width: 280px;
  height: 460px;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.center .home ul li img, .center .luyou ul li img, .center .anquan ul li img, .center .robot ul li img, .center .shouhu ul li img, .center .shengtai ul li img, .center .hot ul li img {
  width: 240px;
  height: 240px;
  margin-bottom: 20px;
}

.center .home ul li span, .center .luyou ul li span, .center .anquan ul li span, .center .robot ul li span, .center .shouhu ul li span, .center .shengtai ul li span, .center .hot ul li span {
  width: 80px;
  height: 30px;
  background-color: #f17f38;
  text-align: center;
  color: #fff;
}

.center .home ul li .cu, .center .luyou ul li .cu, .center .anquan ul li .cu, .center .robot ul li .cu, .center .shouhu ul li .cu, .center .shengtai ul li .cu, .center .hot ul li .cu {
  display: block;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
}

.center .home ul li .xi, .center .luyou ul li .xi, .center .anquan ul li .xi, .center .robot ul li .xi, .center .shouhu ul li .xi, .center .shengtai ul li .xi, .center .hot ul li .xi {
  display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  margin-bottom: 20px;
}

.center .home ul li .wai, .center .luyou ul li .wai, .center .anquan ul li .wai, .center .robot ul li .wai, .center .shouhu ul li .wai, .center .shengtai ul li .wai, .center .hot ul li .wai {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center .home ul li .wai .pri, .center .luyou ul li .wai .pri, .center .anquan ul li .wai .pri, .center .robot ul li .wai .pri, .center .shouhu ul li .wai .pri, .center .shengtai ul li .wai .pri, .center .hot ul li .wai .pri {
  font-size: 26px;
  color: red;
  margin-right: 10px;
}

.center .home ul li .wai .oldpri, .center .luyou ul li .wai .oldpri, .center .anquan ul li .wai .oldpri, .center .robot ul li .wai .oldpri, .center .shouhu ul li .wai .oldpri, .center .shengtai ul li .wai .oldpri, .center .hot ul li .wai .oldpri {
  font-size: 16px;
  font-weight: 100;
  text-decoration: line-through;
}

.center .home ul span, .center .luyou ul span, .center .anquan ul span, .center .robot ul span, .center .shouhu ul span, .center .shengtai ul span, .center .hot ul span {
  display: block;
}

.center .home ul span img, .center .luyou ul span img, .center .anquan ul span img, .center .robot ul span img, .center .shouhu ul span img, .center .shengtai ul span img, .center .hot ul span img {
  width: 580px;
  height: 460px;
}

.center .home p img, .center .luyou p img, .center .anquan p img, .center .robot p img, .center .shouhu p img, .center .shengtai p img, .center .hot p img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.center .more {
  display: flex;
  flex-direction: column;
}

.center .more span {
  display: block;
  font-size: 20px;
  margin: 10px;
}

.center .more span i {
  font-style: normal;
  font-size: 16px;
  cursor: pointer;
}

.center .more ul, .center .more ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.center .more ul li, .center .more ol li {
  width: 210px;
  height: 345px;
  margin: 20px;
  text-align: center;
}

.center .more ul li img, .center .more ol li img {
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
}

.center .more ul li .cu, .center .more ol li .cu {
  font-size: 16px;
}

.center .more ul li .xi, .center .more ol li .xi {
  font-size: 16px;
}

.center .more ul li .pri, .center .more ol li .pri {
  font-size: 20px;
  color: red;
  margin-top: 10px;
}

.center .more ul li span, .center .more ol li span {
  width: 90px;
  border: 1px solid #f17f38;
  margin-left: 66px;
  color: #f17f38;
}

.footer {
  display: flex;
  flex-direction: column;
}

.footer .shang {
  height: 330px;
  display: flex;
}

.footer .shang .left {
  display: flex;
}

.footer .shang .left .zuo {
  margin-top: 30px;
  width: 370px;
  display: flex;
  flex-direction: column;
}

.footer .shang .left .zuo i {
  font-style: normal;
  font-size: 23px;
  font-weight: 900;
  margin-bottom: 30px;
}

.footer .shang .left .zuo p {
  font-weight: 400;
  margin-bottom: 20px;
}

.footer .shang .left .zuo span {
  display: block;
  width: 370px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.footer .shang .left .zuo .bottom {
  display: flex;
}

.footer .shang .left .zuo .bottom p {
  margin-top: 5px;
}

.footer .shang .left .zuo .bottom ul {
  display: flex;
  margin-left: 5px;
  align-items: center;
  vertical-align: center;
  margin-bottom: 60px;
}

.footer .shang .left .zuo .bottom ul li:nth-child(1) {
  width: 30px;
  height: 30px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -8px;
  background-position-y: -160px;
  margin-right: 5px;
}

.footer .shang .left .zuo .bottom ul li:nth-child(2) {
  width: 30px;
  height: 30px;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -40px;
  background-position-y: -160px;
}

.footer .shang .left .zhong, .footer .shang .left .you {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  margin-left: 120px;
}

.footer .shang .left .zhong li, .footer .shang .left .you li {
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
}

.footer .shang .left .zhong .cu, .footer .shang .left .you .cu {
  font-weight: 900;
  font-size: 23px;
  margin-bottom: 30px;
  cursor: default;
}

.footer .shang .shu {
  display: block;
  height: 265px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  margin-left: 60px;
  margin-top: 30px;
}

.footer .shang .right {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 30px;
}

.footer .shang .right ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .shang .right ul li:nth-child(1) {
  font-weight: 900;
  font-size: 23px;
  margin-bottom: 30px;
}

.footer .shang .right ul li:nth-child(2) {
  font-weight: 900;
  font-size: 30px;
  margin-bottom: 10px;
}

.footer .shang .right ul li:nth-child(3) {
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 30px;
}

.footer .xia {
  display: flex;
  flex-direction: column;
  background-color: #333333;
}

.footer .xia .top {
  display: flex;
  color: white;
  cursor: pointer;
}

.footer .xia .top .left {
  margin-top: 30px;
  display: flex;
}

.footer .xia .top .left span {
  width: 32px;
  height: 30px;
  display: block;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -10px;
  background-position-y: -197px;
  margin-left: 130px;
}

.footer .xia .top .left p {
  font-size: 20px;
  margin-left: 10px;
}

.footer .xia .top .center {
  display: flex;
  cursor: pointer;
  margin-top: 25px;
}

.footer .xia .top .center span {
  width: 32px;
  height: 30px;
  display: block;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -45px;
  background-position-y: -197px;
  margin-left: 270px;
  margin-top: 10px;
}

.footer .xia .top .center p {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 3px;
}

.footer .xia .top .right {
  display: flex;
  cursor: pointer;
  margin-top: 30px;
}

.footer .xia .top .right span {
  width: 32px;
  height: 30px;
  display: block;
  background-image: url(https://p1.qhimg.com/t019bd9e375d813e9d1.png);
  background-position-x: -80px;
  background-position-y: -197px;
  margin-left: 270px;
  margin-top: 10px;
}

.footer .xia .top .right p {
  font-size: 20px;
  margin-left: 10px;
  margin-top: 3px;
}

.footer .xia .heng {
  display: block;
  width: 1260px;
  border: 1px solid rgba(102, 102, 102, 0.7);
  margin-bottom: 30px;
  margin-left: 50px;
  margin-top: 60px;
  box-sizing: border-box;
}

.footer .xia .bottom {
  color: white;
  display: flex;
  flex-direction: column;
}

.footer .xia .bottom ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .xia .bottom ul li:nth-child(1), .footer .xia .bottom ul li:nth-child(2) {
  font-weight: 700;
  font-size: 18px;
}

.footer .xia .bottom ul li:nth-child(3), .footer .xia .bottom ul li:nth-child(4) {
  font-weight: 500;
  color: #999999;
}

.footer .xia .bottom ul li:nth-child(4) {
  margin-bottom: 10px;
}

.footer .xia .bottom ul li:nth-child(2) {
  cursor: pointer;
}
